<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>this问题</title>
</head>
<body>
  <script>
    /* 
    1. 我们调用的
      直接调用 => window
      new 调用 => 新创建的实例对象
      通过对象调用 => 对象
      通过call/apply/bind => 第一个参数对象
    2. 回调函数
        定时器/数据遍历的回调/ajax回调/promise的回调 ==> window
        事件回调 => dom元素
        
    例外: 箭头函数 => 没有自己的this, 只能去外部作用域找this
    */
    function fn() {
      console.log(this)
    }

    // 直接调用 => window
    // fn() 

    // new 调用 => 新创建的实例对象
    // new fn()

    // 通过对象调用 => 对象
    const obj = {f: fn}
    // obj.f()

    // 通过call/apply/bind => 第一个参数对象
    // fn.call(obj)
    // fn.bind(obj)()

    /* 
    例外: 箭头函数 => 没有自己的this, 只能去外部作用域找this
    */
    const fn2 = () => {
      console.log(this)
    }
    fn2.call(obj)  // this是谁?

    const obj2 = {
      fn: () => {
        console.log(this)
      }
    }
    obj2.fn() // this是谁?



    /* 
      var obj2 = {
      name: 'obj',
      foo1: () => {
        console.log(this.name)
      },
      foo2: function () {
          console.log(this.name)
          return function () {
          // return () => {
            console.log(this.name)
          }
        }
      }
      var name = 'window'
      obj2.foo1()
      obj2.foo2()()
    */
    
  </script>
</body>
</html>